<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.productionDevice_delete"
                   @click="handleDelete">删 除
        </el-button>
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-download"
          @click="handleExport"
        >
          导 出
        </el-button>
      </template>
      <!-- 附件表格自定义 -->
      <!-- <template slot="fj">
          <el-button
          type="primary"
          size="mini"
          @click="detail()"
        >查看记录
        </el-button>
      </template> -->
      <!-- 附件表单自定义 -->
      <template slot="fjForm">
        <div>
          <el-upload
            action="/api/fileManager/upload/file"
            :headers="SetHeaders"
            :file-list="fjFileList"
            :before-upload="beforeUploadFJ"
            :on-remove="handleRemoveFJ"
            :on-success="uploadFJSuccess"
          >
            <el-button size="small" type="primary">选择附件</el-button>
          </el-upload>
        </div>
      </template>
    </avue-crud>
    <!-- 弹窗 -->
    <el-dialog 
      title="特种设备查看记录"
      append-to-body
      :visible.sync="specialDetailDialog"
      :close-on-click-modal="false" 
      :before-close="closeAddRelationDialog"
      width="60%"
      class="add_relation_dialog"
    >
      <!-- 内容 -->
      <el-tabs v-model="activeRelationModal" type="card" @tab-click="changeRelationModal">
        <!-- 更新记录 -->
        <el-tab-pane label="更新记录" :name="qualificationStr">
          <updateRecord
            :addRelationDialog="addRelationDialog"
            :xgfdwId="xgfdwId">
          </updateRecord>
        </el-tab-pane>
        <!-- 预防保养记录 -->
        <el-tab-pane label="预防保养记录" :name="staffStr">
          <pmRecord
            :addRelationDialog="addRelationDialog"
            :xgfdwId="xgfdwId">
          </pmRecord>
        </el-tab-pane>
        <!-- 检维修记录 -->
        <el-tab-pane label="检维修记录" :name="staffStr">
          <overhaulRecord
            :addRelationDialog="addRelationDialog"
            :xgfdwId="xgfdwId">
          </overhaulRecord>
        </el-tab-pane>
        <!-- 点巡检记录 -->
        <el-tab-pane label="点巡检记录" :name="staffStr">
          <inspectionRecord
            :addRelationDialog="addRelationDialog"
            :xgfdwId="xgfdwId">
          </inspectionRecord>
        </el-tab-pane>
      </el-tabs>
      <!-- 按钮 -->
      <div class="add_relation_footer"> 
        <el-button 
          type="primary"
          size="small"
          @click="closeAddRelationDialog()">
          关 闭
        </el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {getList, add, update, remove} from "@/api/equipmentmanage/productionDevice";
  import updateRecord from "../dialog/updateRecord";
  import pmRecord from "../dialog/pmRecord";
  import overhaulRecord from "../dialog/overhaulRecord";
  import inspectionRecord from "../dialog/inspectionRecord";
  import {mapGetters} from "vuex";
  import {getToken} from "@/util/auth";

  export default {
    components: {
      updateRecord,
      pmRecord,
      overhaulRecord,
      inspectionRecord
    },
    data() {
      return {
        specialDetailDialog:false,
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 30,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          height:'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          searchLabelWidth:80,
          border: true,
          index: false,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          column: [
           {
              label: "设备编号",
              prop: "sbbh",
              labelWidth:150,
              align: "center",
              row: false,
              span:24,
            },
            {
              label: "设备类型",
              labelWidth:150,
              prop: "sblb",
              align: "center",
              search: true,
              type: "select",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=productionDevice_type",
              props: {
                label: "dictValue",
                value: "dictKey",
              }
            },
           {
              label: "设备名称",
              labelWidth:150,
              prop: "sbmc",
              align: "center",
              search: true,
              row: false,
            },
           {
              label: "规格型号",
              labelWidth:150,
              prop: "ggxh",
              align: "center",
              row: false,
            },
           {
              label: "功率(KW)",
              labelWidth:150,
              prop: "gl",
              align: "center",
              row: false,
              hide:true,
            },
           {
              label: "出厂日期",
              labelWidth:150,
              prop: "ccrq",
              align: "center",
              row: false,
              hide:true,
            },
           {
              label: "维修状态",
              labelWidth:150,
              prop: "wxzt",
              align: "center",
              row: false,
              type: "select",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=productionDevice_status",
              props: {
                label: "dictValue",
                value: "dictKey",
              },
              hide:true,
            },
            {
              label: "设备使用单位",
              prop: "sbsydw",
              align: "center",
              labelWidth:150,
              row: false,
            },
            {
              label: "主要技术参数",
              labelWidth:150,
              prop: "zyjscs",
              align: "center",
              row: false,
              type: "textarea",
              span: 24,
              maxlength: 200,
              hide:true
            },
            {
              label: "设备状况",
              prop: "tt43",
              align: "center",
              row: false,
              display:false
            },
           {
              label: "数量",
              labelWidth:150,
              prop: "sl",
              align: "center",
              row: false,
            },
            {
              label: "介质",
              prop: "jz",
              align: "center",
              labelWidth:150,
              row: false,
              hide:true,
              display:true
            },
            {
                label: "投用日期",
                labelWidth:150,
                prop: "tyrqfw",
                align: "center",
                search: true,
                row: false,
                type: "select",
                dicUrl: "/api/blade-system/dict-biz/dictionary?code=productionDevice_tyri",
                props: {
                  label: "dictValue",
                  value: "dictKey",
                }
              },
           {
              label: "下次检验日期",
              labelWidth:150,
              prop: "xcjyrq",
              align: "center",
              type: "date",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
            },
            {
              label: "制造单位",
              labelWidth:150,
              prop: "zzdw",
              align: "center",
              span: 24,
              row: false,
            },
            {
              label: "责任人",
              prop: "zrren",
              align: "center",
              labelWidth:150,
              row: false,
              display:true,
              hide:true
            },
            {
              label: "联系电话",
              prop: "lxdh",
              align: "center",
              labelWidth:150,
              row: false,
              display:true,
              hide:true
            }, 
            {
              label: "主要危险性",
              labelWidth:150,
              prop: "zywhx",
              align: "center",
              row: false,
              type: "textarea",
              span: 24,
              maxlength: 200,
              display:true,
              hide:true
            },
            {
              label: "装置设施用途",
              labelWidth:150,
              prop: "zbssyt",
              align: "center",
              row: false,
              hide:true,
              display:true
            },
            {
              label: "设置部位",
              labelWidth:150,
              prop: "szbw",
              align: "center",
              row: false,
              display:true,
              hide:true
            },
            {
              label: "使用期限",
              labelWidth:150,
              prop: "syqx",
              align: "center",
              row: false,
              hide:true,
            },
            {
              label: "停用状态",
              labelWidth:150,
              prop: "tyzt",
              align: "center",
              row: false,
              type: "select",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=productionDevice_tyzt",
              props: {
                label: "dictValue",
                value: "dictKey",
              },
              hide: true
            },
            {
              label: "生命周期",
              labelWidth:150,
              prop: "smzq",
              align: "center",
              hide:true
            },
           {
              label: "负责人部门",
              prop: "fzrbm",
              align: "center",
              labelWidth:150,
              row: false,
              hide:true
            },
            {
              label: "预警值",
              labelWidth:150,
              prop: "yjz",
              align: "center",
              row: false,
              hide:true
            },
            {
              label: "联锁值",
              labelWidth:150,
              prop: "lxdh",
              align: "center",
              display:true,
              hide:true
            },
            {
              label: "检查前提醒(天)",
              labelWidth:150,
              prop: "jcqtx1",
              align: "center",
              row: false,
              display:true,
              hide:true
            },
            {
              label: "检查周期(天)",
              labelWidth:150,
              prop: "jczq1",
              align: "center",
              row: false,
              display:true,
              hide:true
            },
            {
              label: "检测提前提醒(天)",
              labelWidth:150,
              prop: "jcqtx2",
              align: "center",
              row: false,
              display:true,
              hide:true
            },
            {
              label: "检测周期(天)",
              labelWidth:150,
              prop: "jczq2",
              align: "center",
              row: false,
              display:true,
              hide:true
            },
           {
              label: "上次检测日期",
              prop: "scjcrq",
              align: "center",
              row: false,
              display:false
            },
           {
              label: "下次检测日期",
              prop: "xcjcrq",
              align: "center",
              row: false,
              display:false
            },
           {
              label: "检测人",
              labelWidth:150,
              prop: "jcren",
              align: "center",
              row: false,
              display:true,
              hide:true
            },
           {
              label: "检测单位",
              labelWidth:150,
              prop: "jcdw",
              align: "center",
              row: false,
              display:true,
              hide:true
            },
           {
              label: "检测结果",
              prop: "jcjg",
              align: "center",
              labelWidth:150,
              row: false,
              display:true,
              hide:true
            },
            {
              label: "检测内容",
              labelWidth:150,
              prop: "jcnr",
              align: "center",
              row: false,
              type: "textarea",
              span: 24,
              maxlength: 150,
              display:true,
              hide:true
            },
            {
              label: "检测结果说明",
              labelWidth:150,
              prop: "jcjgsm",
              align: "center",
              row: false,
              type: "textarea",
              span: 24,
              maxlength: 150,
              display:true,
              hide:true
            }
          ]
        },
        // 附件
        fjFileList: [],
        downloadHead: "/api/fileManager/download/",
        SetHeaders: { "Blade-Auth": getToken() },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.productionDevice_add, false),
          viewBtn: this.vaildData(this.permission.productionDevice_view, false),
          delBtn: this.vaildData(this.permission.productionDevice_delete, false),
          editBtn: this.vaildData(this.permission.productionDevice_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      // rowStyle(column){
      //   this.option.editBtn = false;
      // },
    closeAddRelationDialog() {
      this.specialDetailDialog = false;
    },
      rowSave(row, done, loading) {
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
      },
      rowUpdate(row, index, done, loading) {
        console.log(row)
        update(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          console.log(error);
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      beforeOpen(done, type) {
        this.fjFileList = [];
        if (["edit", "view"].includes(type)) {
            if (type === "edit" && this.form.bladeFiles.fileName !== undefined) {
              this.fjFileList.push({
                name: this.form.bladeFiles.fileName,
                response: {
                  code: 200,
                  success: true,
                  msg: "操作成功",
                  data: this.form.bladeFiles
                }
              });
            }
        }
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      },
      detail() {
        this.specialDetailDialog=true;
      },

      /**
       * 上传附件
       */

      // 上传检测报告前
      beforeUploadFJ(file) {
        var isLimit = this.fjFileList.length + 1 <= 1;
        if (!isLimit) {
          this.$message.warning("只能选择一个附件!");
        }
        return isLimit;
      },

      // 上传附件成功
      uploadFJSuccess(response, file, fileList) {
        if (response.code !== 200 || response.success !== true) {
          return;
        }
        this.fjFileList = fileList;
        this.form.fj = response.data.id;
      },

      // 删除附件
      handleRemoveFJ(file, fileList) {
        this.fjFileList = fileList;
        this.form.fj = "";
      }
    }
  };
</script>

<style>
.add_relation_footer {
  text-align: right;
  margin-top: 15px;
}
</style>
